<!-- Created by henian.xu on 2018/11/8. -->

<script>
export default {
    name: 'Popup',
    data() {
        return {
            appLevel: true,
            popupShow: false,
            isAppend: false,
            alignSelf: false, // 对齐自己
            parentScrollTop: 0,
        };
    },
    computed: {
        $$popupWrap() {
            return this.createPopupWrap();
        },
        $$self() {
            return this.$refs['self'] || null;
        },
        $$popup() {
            return this.$refs['popup'] || null;
        },
        $$popupNode() {
            const { $$popup } = this;
            if (!$$popup) return null;
            if (!$$popup.$el && !$$popup.nodeType) return null;
            return $$popup.$el || $$popup;
        },
        statusClass() {
            const { popupShow, alignSelf } = this;
            return [popupShow ? 'open' : 'close', { 'align-self': alignSelf }];
        },
        positionStyle() {
            if (!this.alignSelf || !this.popupShow) return {};
            const rect = this.getSelfRect(this.parentScrollTop);
            return {
                left: `${rect.left}px`,
                top: `${rect.top + rect.height}px`,
                minWidth: `${rect.width}px`,
            };
        },
    },
    methods: {
        getSelfRect() {
            const $self = this.$refs['self'];
            const offset = $self.getBoundingClientRect();
            // console.log(offset);
            return {
                left: offset.left,
                top: offset.top,
                width: offset.width,
                height: offset.height,
            };
        },
        createPopupWrap() {
            const page = document.getElementById('__nuxt');
            const childNodes = page.childNodes;
            let popup;
            for (let i = 0, l = childNodes.length; i < l; i++) {
                const item = childNodes[i];
                if (item.nodeType !== 1) continue;
                if (/\bpopup-wrap\b/.test(item.className)) {
                    popup = item;
                    break;
                }
            }
            if (!popup) {
                popup = document.createElement('div');
                popup.classList.add('popup-wrap');
                page.appendChild(popup);
            }
            return popup;
        },
        mount() {
            if (this.disabled || this.readonly) return;
            const { $$popupNode } = this;
            if (!$$popupNode) return;
            this.$$popupWrap.appendChild($$popupNode);
            this.isAppend = true;
        },
        onSwitch() {
            this.popupShow = !this.popupShow;
        },
        open() {
            this.popupShow = true;
        },
        close() {
            this.popupShow = false;
        },
    },
    mounted() {
        this.appLevel && this.mount();
        // FIXME 监听 window.scroll 事件是不明智的
        this.alignSelf && this.$utils.Dom.on(window, 'scroll', () => (this.parentScrollTop = window.scrollY));
    },
    beforeDestroy() {
        const { $$popupWrap, $$popupNode, isAppend, alignSelf } = this;
        alignSelf && this.$utils.Dom.off(window, 'scroll');
        if (!$$popupNode) return;
        isAppend && $$popupWrap.removeChild($$popupNode);
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';

.popup-wrap {
    // 只留了做弹框挂载用
    &.align-self {
        position: fixed;
        z-index: $z-index-7;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
    }
    > .popup {
        position: absolute;
        z-index: $z-index-7;
    }
}
</style>
